<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/11/2
  Time: 11:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>用户头像上传模块</title>
    <link href="${pageContext.request.contextPath}/layui/css/layui.css" rel="stylesheet" />
    <script src="${pageContext.request.contextPath}/layui/layui.js"></script>
    <script src="${pageContext.request.contextPath}/js/jquery-3.3.1.min.js"></script>
    <style>
    #address-right{
    width: 850px;
    height: 600px;
    margin-top: 10px;
    margin-left: 10px;
    margin-bottom: 10px;
    border: 1px solid #f6f6f6;
    float: left;
    }
    .address-right-head{
    height: 40px;
    width: 850px;
    margin-left: 10px;
    /* border: 1px solid black; */
    border-collapse: collapse;
    }
    .address-right-head1{

    border-bottom: 2px solid orange;
    }
    .address-right-head3{
    width: 100px;
    height: 35px;
    margin-top: 10px;
    background-color: #ef771f;
    color: white;
    line-height: 35px;
    text-align: center;
    font-size: 16px;
    }
    .address-font{
    color: orange;
    }
    .header-bottom-search{
    padding-left: 350px;
    }
    #address_right_a1,#test1{
    margin-top: 80px;
    margin-left: 100px;
    float: left;
    }
    #address_rightup{
    float: left;
    margin-top: 80px;
    }
    #address_rightupno{
    padding-top: 80px;
    margin-top: 80px;
    }
    .address-right2{
    margin-left: 180px;
    margin-top: 10px;
    }
    </style>

</head>
<body>

<!-- 用户头像修改 -->
<table id="address-right "  >
    <tr>
        <td>
            <table class="address-right-head">
                <tr class="address-right-head1">
                    <td class="address-right-head2">
                        <div class="address-right-head3">
                            用户头像修改
                        </div>
                    </td>
                </tr>
            </table>
        </td>
    </tr>

    <tr class="address-right-a">
        <td >
<%--            <div id="address_right_a1" >请选择头像:</div>--%>
            <form id="uploadForm"  enctype="multipart/form-data">
                <div style="margin-top: 40px;margin-left: 60px">
                用户名：<input type="text" name="username"><br />
                </div>
                <div style="margin-top: 15px;margin-left: 60px">
                文件：<input type="file" name="userfile"><br />
                </div>
            </form>
            <button style="margin-top: 15px;margin-left: 60px" type="submit" 	class="layui-btn layui-btn-radius" id="upload">提交</button>
           <%-- <div class="layui-upload" id="address_rightup">
                <button type="button" class="layui-btn" id="address_rightupload">上传图片</button>
                <span  class="address_rightupno">未选择任何文件</span>
                <!-- <div class="layui-upload-list">
                   <img class="layui-upload-img" id="demo1">
                   <p id="demoText"></p>
                 </div>
                 <div style="width: 95px;">
                   <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
                     <div class="layui-progress-bar" lay-percent=""></div>
                   </div>
                 </div> -->
            </div>--%>
        </td>
    </tr>
<%--    <tr >
        <td>
            <button class="address-right2">保存</button>
            <button>取消</button>
        </td>

    </tr>--%>

</table>

</body>

<script>
    $(function () {
        let bool = false;
        $("#upload").click(function () {
            var formData = new FormData($('#uploadForm')[0]);
            $.ajax({
                type: 'post',
                url: "${pageContext.request.contextPath}/upload/up",
                data: formData,
                cache: false,
                async:false,//同步：意思是当有返回值以后才会进行后面的js程序。
                processData: false,
                contentType: false,
                dataType:"json",
                success: function (data) {
                    if(data.flag){//如果上传成功
                        alert(data);
                        bool = true;
                    }else {
                        alert("上传失败");
                        bool = false;
                    }
                }
            });
            if(bool){
                window.location.href="${pageContext.request.contextPath}/user/uploadhead";
            }
            });
    });
   /* layui.use(['upload', 'element', 'layer'], function(){
        var $ = layui.jquery
            ,upload = layui.upload
            ,element = layui.element
            ,layer = layui.layer;

        //常规使用 - 普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            ,url: 'https://httpbin.org/post' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                });

                element.progress('demo', '0%'); //进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
            }
            ,done: function(res){
                //如果上传失败
                if(res.code > 0){
                    return layer.msg('上传失败');
                }
                //上传成功的一些操作
                //……
                $('#demoText').html(''); //置空上传失败的状态
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
            //进度条
            ,progress: function(n, elem, e){
                element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                if(n == 100){
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        })*/
</script>
</html>
